<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../stylesheets/header-and-footer.css" />

    <title>Data</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    html {
      height: 100%;
    }

    body {
      min-height: 100%;
      background-color: #fff;
    }

    #AllData {
      margin: 0 auto;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      align-content: space-around;
      width: 95vw;
      height: 90%;
      text-decoration: none;
    }

    #AllData li {
      width: 30vw;
      height: 250px;
      list-style: none;
      line-height: 250px;
      /* background-color:rgb(57, 61, 73) ; */
      color: black;
    }

    #Page {
      width: 60vw;
      margin: 35px auto;
    }

    html {
      height: 100%;
    }

    body {
      min-height: 100%;
      background-color: #fff;
    }

    .adjust {
      width: 12rem;
    }
  </style>

  <body>
    <!-- 头部 -->
    <div class="layui-row">
      <!-- logo -->
      <div class="layui-col-md4">
        <header class="">
          <div id="header-container">
            <a href="https://www.spaceclimateobservatory.org/">
              <img
                class="logo"
                src="../images/sco-logo.svg"
                alt="Space Climate Observatory (SCO)"
              />
              <span style="color: #fff; font-size: 1.2em; line-height: 8.2vh"
                >国际气候观测站</span
              >
            </a>
            <a href="http://cge.njtech.edu.cn/">
              <img
                class="logo"
                src="../images/logo.png"
                alt="南京工业大学测绘科学与技术学院"
              />
            </a>
            <!-- <span class="title">江苏省海洋反演平台</span> -->
          </div>
        </header>
      </div>

      <!-- 导航栏 -->
      <div class="layui-col-md7 head-bg">
        <ul class="layui-nav nav-menu" lay-filter="">
          <li class="layui-nav-item">
            <a href="./index.html">Home</a>
          </li>
          <li class="layui-nav-item">
            <a href="./introduction.html">Project </a>
          </li>
          <li class="layui-nav-item">
            <a href="./background.html">Background</a>
          </li>
          <li class="layui-nav-item layui-this">
            <a href="./data.html">Research</a>
            <dl class="layui-nav-child">
              <dd><a href="./data.html">Data</a></dd>
              <dd><a href="./model-column/model.html">Models</a></dd>
              <dd><a href="./showdata.html">Algorithms</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="./about.html">Team</a>
          </li>
          <li class="layui-nav-item">
            <a class="last" href="./contact.html">Contact Us</a>
          </li>
        </ul>
      </div>
      <a href="../zh-cn/data.html">
        <button class="layui-btn layui-btn-primary switch-language">
          Chinese
        </button>
      </a>
    </div>

    <ul id="AllData">
      <li
        class="rounded-lg shadow-lg cursor-pointer mt-8 flex justify-center content-center bg-black text-white"
      >
        <div class="h-17 mt-20">
          <p class="font-mono text-lg">数据实时渲染展示</p>
          <p class="font-mono text-lg">简介:测试</p>
        </div>
        <img
          class="h-40 w-68 p-4 rounded-3xl ml-1 mt-10"
          src="../../public/img/1.jpg"
          alt=""
        />
      </li>
    </ul>
    <div id="Page" class="mt-30 flex justify-center"></div>

    <footer>
      <div id="footer-container">
        <ul class="footer-info-ls">
          <li>
            <span class="layui-breadcrumb" lay-separator="|">
              <a href="index.html">Home</a>
              <a href="./introduction.html">Project </a>
              <a href="./background.html">Background</a>
              <a href="./data.html">Research</a>
              <a href="./about.html">Team</a>
              <a href="./contact.html">Contact Us</a>
            </span>
          </li>
          <li>
            Address: No. 30, Puzhu South Road, Pukou District, Nanjing City,
            Jiangsu
            Province&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Post：211800&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone：025-58139464
          </li>
          <li>
            <a href="http://cge.njtech.edu.cn/"
              >Rights Reserved © School of Surveying and Mapping Science and
              Technology, Nanjing University of Technology</a
            >
          </li>
          <li></li>
        </ul>
      </div>
    </footer>

    <script src="../layui/layui.js" type="application/javascript"></script>
    <script>
      layui.use('element', function () {
        var element = layui.element
      })
      layui.use('laypage', function () {
        var laypage = layui.laypage

        //测试数据
        var data = [
          '高分系列卫星影像,GF-1/2/3/4/6,"../images/高分系列.png"',
          '陆地卫星影像,Landsat-8,"../images/landsat-8.jpg"',
          '环境卫星影像,HJ1A/B,"../images//环境卫星.PNG"',
          '哨兵卫星影像,Sentinel-2,"../images/哨兵2号.PNG"',
          '专题信息,LUCC,"../images/专题信息.jpg"',
          '降雨量,Rainfall,"../images/降雨.jpg"',
          '实地测量数据,人口密度、港口发展、农业种植和土地面积等,"../images/实地测量人口密度.jpg"'
          // '宁夏,暂无,"../img/1.jpg"',
          // '成都,暂无,"../img/1.jpg"',
        ]

        // 调用分页
        laypage.render({
          elem: 'Page',
          count: data.length,
          limit: 6,
          layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip'],
          jump: function (obj) {
            //模拟渲染
            document.getElementById('AllData').innerHTML = (function () {
              var arr = [],
                thisData = data
                  .concat()
                  .splice(obj.curr * obj.limit - obj.limit, obj.limit)
              // console.log((thisData));
              layui.each(thisData, function (index, item) {
                var realdata = item.split(',')
                arr.push(
                  '<a href="javascript:;"><li class="rounded-lg shadow-lg cursor-pointer mt-8 flex justify-center content-center text-white transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">' +
                    '<div class="h-17 mt-20 adjust">' +
                    '<p class="font-mono text-lg">' +
                    realdata[0] +
                    '</p>' +
                    '<p class="font-mono text-lg">简介:' +
                    realdata[1] +
                    '</p>' +
                    '</div>' +
                    '<img  class="img h-40 w-68 p-4 rounded-3xl ml-1 mt-10" src=' +
                    realdata[2] +
                    ' alt="">' +
                    '</li></a>'
                )
              })
              return arr.join('')
            })()
          }
        })
      })
    </script>
  </body>
</html>
